<template>
	<view :id="edit ? 'appbw' : 'app'">
		<uni-transition :mode-class="['fade']" :show="!success">
			<!-- 发布 -->
			<view class="form pt30 plr30 f28 bw">
				<!-- 商品分类 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">商品分类</view>
					<view class="col f1" v-if="!edit">{{typeList[ti].name}}</view>
					<picker :range="typeList" range-key="name" @change="changeType" class="col f1" v-else>
						<view class="rows">
							<view class="txt">
								<text class="pls" v-if="!typeList[ti].name">请选择分类</text>
								<text class="c333" v-else>{{typeList[ti].name}}</text>
							</view>
							<uni-icons type="arrowright" color="#999" v-if="edit"></uni-icons>
						</view>
					</picker>
				</view>
				<!-- 商品名称 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">商品名称</view>
					<view class="col f1 c333">
						<input type="text" v-model="wrap.name" :disabled="!edit" placeholder="请输入名称"
							placeholder-class="pls" />
					</view>
				</view>

				<!-- 商品价格 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">商品价格</view>
					<view class="col df aic f1 c333">
						￥<input type="digit" v-model="wrap.price" :disabled="!edit" placeholder="请输入价格"
							placeholder-class="pls" />
					</view>
				</view>

				<!-- 商品详情 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">商品详情</view>
					<view class="col rows f1 c333">
						<textarea class="shopDetail textplus" :disabled="!edit" maxlength="-1" v-model="wrap.desc"
							placeholder="请填写商品详情" placeholder-class="pls" />
					</view>
				</view>

				<!-- 商品图片 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">商品图片</view>
					<view class="col df f1 fww c333">
						<view class="upImg image" @click="upImg" v-if="edit">
							<image src='/static/2877.png' mode="aspectFill" />
						</view>

						<view class="image pr" v-for="(item,index) in wrap.images" :key="index">
							<image :src="item" mode="aspectFill"></image>
							<view class="icon pa r0" @click="delImg(index)" v-if="edit">
								<uni-icons type="clear" color="#EB5A43" size="15"></uni-icons>
							</view>
						</view>
					</view>
				</view>

				<!-- 配送方式 -->
				<view class="rows list ais ptb30">
					<view class="col w200 c666">配送方式</view>
					<view class="col df f1 c333">
						<!-- 快递物流 -->
						<view class="rows mr50 lh40" @click="changeSend(index)" v-for="(item,index) in expressArr"
							:key="index">
							<view class="icon">
								<uni-icons :type="send == index ? 'checkbox-filled' : 'circle'"
									:color="send == index ? '#FE9747' : '#eee'"></uni-icons>
							</view>
							<view class="txt ml10">{{item.name}}</view>
						</view>
					</view>
				</view>

				<!-- 当前状态 -->
				<view class="rows list ais ptb30" v-if="!edit">
					<view class="col w200 c666">当前状态</view>
					<view class="col f1 c333">
						<text v-if="wrap.status == 1">上架中</text>
						<text v-if="wrap.status == 2">已下架</text>
						<text v-if="wrap.status == 3">审核中</text>
						<text v-if="wrap.status == 4">被驳回</text>
					</view>
				</view>

				<!-- 驳回原因 -->
				<view class="rows list ais ptb30 bdb1sE" v-if="!edit && wrap.status == 4">
					<view class="col w200 c666">驳回原因</view>
					<view class="col f1 c333">{{wrap.reason}}</view>
				</view>

				<!-- 填充 -->
				<view class="fill"></view>

				<!-- 底部按钮 -->
				<cover-view class="footer tac bfef7cc f34 b" @click="release" v-if="edit">{{id ? '保存' : '发布'}}
				</cover-view>

				<cover-view class="footer df dfr aic plr30 bw" v-if="!edit && id && wrap.status != 3">
					<!-- <cover-view class="footer df dfr aic plr30 bw" v-if="!edit && wrap.check_status == 2"> -->
					<cover-view class="btn cancel w200 mr30" v-if="wrap.status == 1" @click="changeShelf">下架
					</cover-view>
					<cover-view class="btn cancel w200 mr30" v-else-if="wrap.status == 2" @click="changeShelf">上架
					</cover-view>
					<cover-view class="btn prmary w200" @click="edit = true"
						v-if="wrap.status == 1 || wrap.status == 4">编辑</cover-view>
					<cover-view class="btn prmary w200" @click="delPro" v-else-if="wrap.status == 2">删除</cover-view>
				</cover-view>
			</view>
		</uni-transition>

		<!-- 发布成功 -->
		<uni-transition :modeClass="['fade']" :show="success" class="pf t0 l0 w100p">
			<!-- 结果 -->
			<view class="result df dfc aic mt10p">
				<!-- 图 -->
				<view class="img wh160">
					<image src="/static/success.png" mode="aspectFit"></image>
				</view>

				<!-- 内容 -->
				<view class="txt mt60 tac c333 f34 fwb">
					<view class="txt">发布成功</view>
					<view class="mt30">请等待后台审核</view>
				</view>

				<!-- 操作框 -->
				<view class="fnArea df aic mt70">
					<navigator delta="1" open-type="navigateBack" class="btn pay w250">我知道了</navigator>
				</view>
			</view>
		</uni-transition>

	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				// 内容
				wrap: {
					images: [],
				},
				// 切换类型列表
				typeList: [],
				// 选择类型
				ti: '',
				// 配送方式
				send: 0,
				// 成功
				success: false,
				// 是否可以编辑
				edit: false,
				// 配送方式
				expressArr: [],
				// 商品id
				id: '',
				pays:false,
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 商品id
			e.id ? that.id = e.id : '';

			// 编辑
			e.edit ? that.edit = e.edit : '';

			// 系统信息
			var config = uni.getStorageSync("config");
			var expressArr = [];
			// 遍历配送方式
			for (var i in config.express_json) {
				expressArr.push({
					name: config.express_json[i],
					value: i,
				})
			}

			// 配送方式
			that.expressArr = expressArr;

			// 分类
			that.cate();

			// 获取详情
			that.getDetail();

			// 详情
			that.wrap.desc = "请填写商品详情";
			// 半秒后执行
			setTimeout(() => {
				// 详情
				that.wrap.desc = "";
			}, 50);

		},
	
		// 方法集
		methods: {
			openMsg() {
				wx.requestSubscribeMessage({ // 调起消息订阅界面
					tmplIds: [
						'xhoD5I9OB1TOKKbbdXoscpkkaoaoKgDahRlsiu9RJl4'
					],
					success(res) {
						console.log('订阅消息 成功 ');
						console.log(res);
						that.pays=true
					},
					fail(er) {
						console.log("订阅消息 失败 ");
						console.log(er);
						that.pays=true
					}
				})
			},
			// 更改上下架状态
			changeShelf() {
				// 弹窗提示
				that.alert({
					value: that.wrap.status == 1 ? '确认下架商品？' : '确认上架该商品？',
					success(rs) {
						// 点击确定
						if (rs.confirm) {
							// 请求接口 
							that.request({
								url: '/api/index/handle',
								// 上传数据
								data: {
									table: 'goods',
									id: that.id,
									// 状态
									status: that.wrap.status == 1 ? 2 : 1,
								},
								load: 1,
								// 调用成功
								success(rs) {
									// 返回成功
									if (rs.code == 1) {
										// 弹窗提示
										that.alert('操作成功');

										// 更改状态
										that.wrap.status = that.wrap.status == 1 ? 2 : 1

										// 重新赋值刷新页面
										that.wrap = Object.assign({}, that.wrap);
									} else {
										//弹窗提示用户
										that.alert(rs.msg);
									}
								}
							})
						}
					}
				});
			},

			// 分类
			cate() {
				// 请求接口
				that.request({
					data: {
						table: "category",
						type: "goods",
						pid: 0,
					},
					load: 1,
					success(rs) {
						// 分类列表
						that.typeList = rs.data;
					}
				})
			},

			// 获取详情
			getDetail() {
				// 判断id
				if (!that.id) return;

				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: {
						table: 'goods',
						id: that.id,
					},
					load: 1,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 赋值内容
							that.wrap = rs.data;

							// 遍历分类
							that.typeList.forEach((e, i) => {
								// 判断id赋值下标
								if (e.id == rs.data.category_id) {
									that.ti = i;
								}
							})

							// 遍历配送方式
							that.expressArr.forEach((e, i, arr) => {
								// 判断配送方式
								if (e.name == rs.data.express) {
									// 赋值下标
									that.send = i;
								}
							})
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 发布
			release() {
				if(!that.pays){
					that.openMsg()
				}else{
					// 赋值内容
					var wrap = that.wrap;
					
					// 判断是否由内容
					if (that.ti != 0 && !that.ti) {
						// 弹窗提示
						that.alert('请选择商品分类');
						return;
					} else if (!wrap.name) {
						// 弹窗提示
						that.alert('请输入商品名称');
						return;
					} else if (!wrap.price) {
						// 弹窗提示
						that.alert('请输入商品价格');
						return;
					} else if (!wrap.desc) {
						// 弹窗提示
						that.alert('请输入商品详情');
						return;
					}
					
					// 分类id
					wrap.category_id = that.typeList[that.ti].id;
					
					// 配送方式
					wrap.express = that.expressArr[that.send].name;
					
					// 判断有无id
					if (that.id) {
						// 判断状态
						wrap.status = wrap.status == 1 ? 3 : wrap.status;
					} else {
						wrap.status = 3;
					}
					
					// 请求接口
					that.request({
						url: '/api/goods/add',
						data: wrap,
						load: true,
						success(rs) {
							if (rs.code == 1) {
								// 判断有无id
								if (that.id) {
									// 弹窗提示
									that.alert('保存成功');
					
									// 半秒后执行
									setTimeout(() => {
										// 返回跳转
										uni.navigateBack();
									}, 500);
								} else {
									// 提交成功
									that.success = true;
					
									// 修改标题
									uni.setNavigationBarTitle({
										title: '发布成功',
									})
								}
							} else {
								that.alert(rs.msg);
							}
						}
					})
				}
				
			},

			// 切换条件
			changeType(e) {
				// 赋值下标
				that.ti = e.detail.value;
			},

			// 改变发送
			changeSend(i) {
				// 判断是否可以编辑
				if (that.edit) {
					// 赋值下标
					that.send = i;
				}
			},

			// 上传图片
			upImg() {
				// 判断是否可以编辑
				if (!that.edit) return;
				// 上传图片
				that.util.img('images', 2, that.wrap, 9);
			},

			// 删除图片
			delImg(index) {
				// 判断是否可以编辑
				if (!that.edit) return;

				// 弹窗提示
				that.alert({
					value: '确认删除图片？',
					success(rs) {
						// 判断时间
						if (rs.confirm) {
							// 删除图片
							that.wrap.images.splice(index, 1);
						}
					},
				});
			},

			// 删除商品
			delPro() {
				// 弹窗提示
				that.alert({
					value: '确认删除商品？',
					success(rs) {
						// 判断是否点击确定
						if (rs.confirm) {
							// 内容
							var item = that.wrap;

							// 请求接口 
							that.request({
								url: '/api/index/handle',
								// 上传数据
								data: {
									table: 'goods',
									id: item.id,
									deletetime: Date.parse(new Date()) / 1000,
								},
								// 调用成功
								success(rs) {
									// 返回成功
									if (rs.code == 1) {
										// 弹窗提示
										that.alert('删除成功');

										// 半秒后执行
										setTimeout(() => {
											// 返回跳转
											uni.navigateBack();
										}, 500);
									} else {
										//弹窗提示用户
										that.alert(rs.msg);
									}
								}
							})
						}
					}
				});
			},

		},
	};
</script>
<style>
</style>
